<template>
	<view class="wrapper">
		<!-- <Head :border="false" title="醒目标签" backgroundColor="transparent" leftIcon="left" ></Head> -->
		<img class="banner_img" src="@/service/static/img/resumeTopBg.png" alt="" />
		<view class="info">
			<view class="bg"></view>
			<view class="serviceBox">
				<view class="resumeServiceTitle">选择服务</view>
				<view class="serviceList clearfix">
					<view
						:class="activeIndex == index ? 'serviceItem ac' : 'serviceItem'"
						v-for="(item, index) in stickList"
						:key="index"
						@click="handleServiceItemClick(item, index)"
					>
						<view class="recomIcon" v-if="item.recommend == 1"></view>
						<view class="t1">{{ item.name }}</view>
						<view class="t2">
							<text>￥</text>
							{{ item.expense1 }}.{{ item.expense2 }}
						</view>
						<view class="t3">{{ item.expense_avg }}</view>
						<view class="icon"></view>
					</view>
				</view>
			</view>
			<view class="tagList">
				<view class="tagTitle">选择醒目标签</view>
				<view class="list clearfix">
					<view :class="activeTagId == item.id ? 'item ac' : 'item'" v-for="(item, index) in options_tag" :key="index" @click="handleTagClick(item, index)">
						{{ item.text }}
					</view>
					<view class="addTag" @click="openTagOprate()">{{ custom_tag_text == '' ? '自定义' : custom_tag_text }}</view>
				</view>
			</view>
			<view class="payBox">
				<checkbox-group @change="handleIsIntegralChange" v-if="enable_points_deduct == 1">
					<label>
						<view class="payLine border">
							<view class="label">{{ points_byname }}抵扣</view>
							<view class="text">
								可使用{{ enable_points_deduct_points }}{{ points_byname }}抵扣{{ enable_points_deduct_expense }}元
								<checkbox color="#09bb07" style="transform:scale(0.8)" :checked="is_deduct" />
							</view>
						</view>
					</label>
				</checkbox-group>
				<radio-group @change="handleChangePaymentType" v-if="amount > 0">
					<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
					<label>
						<view class="payLine">
							<view class="label wxIcon">微信支付</view>
							<view class="text"><radio value="wxpay" :checked="paymentType == 'wxpay'" /></view>
						</view>
					</label>
					<!-- #endif -->
					<!-- <label>
						<view class="payLine">
							<view class="label aliIcon">支付宝支付</view>
							<view class="text"><radio value="alipay" :checked="paymentType == 'alipay'" /></view>
						</view>
					</label> -->
				</radio-group>
			</view>
			<view class="btns">
				<view class="price">
					应付金额：
					<text class="color">￥{{ amount }}</text>
				</view>
				<view class="btn">
					<Pay :paymentType="paymentType" :orderParams="orderParams" @handlePaySuccess="handlePaySuccess" @handlePayFail="handlePayFail">立即支付</Pay>
				</view>
			</view>
		</view>

		<!-- 自定义醒目标签添加 -->
		<!-- <Dialog ref="addTagDialog" title="添加自定义标签" @confirm="handleAddTagConfirm">
			<view class="" style="width: 100%;">
				<uni-easyinput maxlength="5" v-model="custom_tag_text" class="addTagIpt" placeholder="请输入标签内容(最多5个字)"></uni-easyinput>
			</view>
		</Dialog> -->
		<u-modal
			v-model="showAddTagDialog"
			title="添加自定义标签"
			:show-title="true"
			@cancel="handleAddTagCancel"
			@confirm="handleAddTagConfirm"
			show-confirm-button
			show-cancel-button
		>
			<view class="" style="width: 100%;box-sizing: border-box;padding: 30rpx;">
				<u-input maxlength="5" v-model="custom_tag_text" class="addTagIpt" :border="true" placeholder="请输入标签内容(最多5个字)"></u-input>
			</view>
		</u-modal>
	</view>
</template>

<script>
import handlerHttpError from '@/utils/error';
import http from '@/utils/http';
import api from '@/api';
import Pay from '@/components/Pay.vue';
export default {
	components:{
		Pay
	},
	data() {
		return {
			// 自定义标签
			custom_tag_text: '',
			// 支付类型  微信/支付宝
			paymentType: 'wxpay',
			// 服务列表
			stickList: [],
			// 当前服务选择项下标
			activeIndex: 0,
			// 我的积分
			myPoints: 0,
			// 是否允许积分抵扣
			enable_points_deduct: 0,
			//允许抵扣的积分数
			enable_points_deduct_points: 0,
			// 允许抵扣的金额
			enable_points_deduct_expense: 0,
			// 折扣后金额
			after_deduct_expense: 0,
			// 没有折扣金额
			old_amount: 0,
			// 最终支付金额
			amount: 0,
			// 是否使用积分抵扣
			is_deduct: false,
			// 当前选中标签id
			activeTagId: 0,
			// 订单参数
			orderParams: {
				service_type: 'tag',
				service_id: 0,
				deduct_points: 0,
				payment: 'wxpay',
				tag_text: ''
			},
			points_byname: 0,
			showAddTagDialog: false
		};
	},
	created() {
		this.$store.dispatch('getClassify', 'resumeStrongTag');
	},
	computed: {
		options_tag() {
			return this.$store.state.classifyResumeStrongTag;
		}
	},
	onShow() {
		this.getServiceList();
	},
	watch: {
		amount: function(newVal) {
			if (newVal == 0) {
				this.orderParams.payment = 'free';
			} else {
				this.orderParams.payment = 'wxpay';
			}
		}
	},
	mounted() {
		this.points_byname = this.$store.state.config.points_byname;
	},
	methods: {
		openTagOprate() {
			this.showAddTagDialog = true;
			// console.log(this.$refs);
			// // this.$refs.addTagDialog.open()
		},
		// 获取服务列表
		getServiceList() {
			http.get(api.personal_servicelist, { type: 'tag' }).then(res => {
				if (res.data.code == 200) {
					let list = res.data.data.items;
					// 计算 单天/单次 金额
					for (let iterator of list) {
						let expense_arr = iterator.expense.split('.');
						iterator.expense2 = expense_arr[1];
						iterator.expense1 = expense_arr[0];
						iterator.expense_avg = iterator.expense / iterator.days;
						iterator.expense_avg = iterator.expense_avg.toFixed(2) + '元/天';
						this.stickList.push(iterator);
					}
					// 默认选择第一项服务
					// 获取服务id
					this.orderParams.service_id = list[0].id;
					// 我的积分
					this.myPoints = res.data.data.member_points;
					// 是否允许积分抵扣
					this.enable_points_deduct = list[0].enable_points_deduct;
					// 允许抵扣的积分数
					this.enable_points_deduct_points = list[0].enable_points_deduct_points;
					// 允许抵扣的金额
					this.enable_points_deduct_expense = list[0].enable_points_deduct_expense;
					// 抵扣后金额
					this.after_deduct_expense = list[0].after_deduct_expense;
					// 没有折扣的金额
					this.old_amount = list[0].expense;
					// 计算最终支付金额
					this.handlerFinalAmount();
				}
			});
		},
		// 计算金额
		handlerFinalAmount() {
			if (this.is_deduct) {
				this.amount = this.after_deduct_expense;
			} else {
				this.amount = this.old_amount;
			}
		},
		// 服务项点击
		handleServiceItemClick(item, index) {
			// 切换时重置抵扣
			this.is_deduct = false;
			this.orderParams.deduct_points = 0;
			// 当前选中下标
			this.activeIndex = index;
			//服务id
			this.orderParams.service_id = item.id;
			// 是否允许积分抵扣
			this.enable_points_deduct = item.enable_points_deduct;
			// 允许抵扣的积分数
			this.enable_points_deduct_points = item.enable_points_deduct_points;
			// 允许抵扣的金额
			this.enable_points_deduct_expense = item.enable_points_deduct_expense;
			// 抵扣后金额
			this.after_deduct_expense = item.after_deduct_expense;
			// 没有折扣的金额
			this.old_amount = item.expense;
			// 计算最终支付金额
			this.handlerFinalAmount();
		},
		// 是否使用积分抵扣
		handleIsIntegralChange(e) {
			this.is_deduct = !this.is_deduct;
			this.orderParams.deduct_points = this.is_deduct ? this.enable_points_deduct_points : 0;
			this.handlerFinalAmount();
		},
		// 支付切换
		handleChangePaymentType(e) {
			this.paymentType = e.detail.value;
			this.orderParams.payment = e.detail.value;
		},
		// 标签点击
		handleTagClick(item, index) {
			this.activeTagId = item.id;
			this.orderParams.tag_text = item.text;
		},
		// 添加自定义标签确认
		handleAddTagConfirm() {
			this.showAddTagDialog = false;
			this.activeTagId = '';
			this.orderParams.tag_text = this.custom_tag_text;
		},
		handleAddTagCancel() {
			this.showAddTagDialog = false;
			this.activeTagId = '';
			this.custom_tag_text = '';
		},
		// 支付成功
		handlePaySuccess() {
			uni.navigateTo({
				url: '/pages/service/orderList'
			});
		},
		// 支付失败
		handlePayFail() {
			uni.navigateTo({
				url: '/pages/service/orderList'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	.banner_img {
		display: block;
		width: 100%;
	}
	::v-deep.head {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		z-index: 10;
	}
	.info {
		height: calc(100% - 140rpx);
		overflow-y: auto;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			// background: url('../static/img/strikingTagBg.png') no-repeat top center / 100% auto;
			height: 460rpx;
		}
		.tagList {
			margin: 0 36rpx 30rpx;
			padding: 0 36rpx;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(67, 12, 159, 0.13);
			.tagTitle {
				color: #333;
				font-size: 30rpx;
				font-weight: bold;
				padding: 30rpx 0;
			}
			.list {
				padding-bottom: 7rpx;
				.item {
					float: left;
					margin: 0 20rpx 20rpx 0;
					border: 1rpx solid #ededed;
					border-radius: 30rpx;
					padding: 10rpx 20rpx;
					color: #999999;
					font-size: 26rpx;
					&:nth-child(4n) {
						margin-right: 0;
					}
					&.ac {
						border: 1rpx solid #4a8bf3;
						color: #4a8bf3;
						background: #edf3fc;
					}
				}
				.addTag {
					float: left;
					margin: 0 0rpx 20rpx 0;
					border-radius: 30rpx;
					padding: 10rpx 20rpx 10rpx 50rpx;
					border: 1rpx dashed #4a8bf3;
					color: #4a8bf3;
					font-size: 26rpx;
					background: url('../static/img/addTagIcon.png') no-repeat 20rpx center / 22rpx 20rpx;
				}
			}
		}
		.serviceBox {
			// margin-top: 460rpx;
			.resumeServiceTitle {
				color: #333;
				font-size: 30rpx;
				font-weight: bold;
				padding: 27rpx 36rpx 34rpx;
			}
			.serviceList {
				overflow-x: auto;
				white-space: nowrap;
				margin: 0 0 64rpx 36rpx;
				.serviceItem {
					display: inline-block;
					width: 230rpx;
					height: 286rpx;
					margin-right: 30rpx;
					border: 1rpx solid #d1a571;
					text-align: center;
					position: relative;
					padding: 62rpx 0 0 0;
					box-sizing: border-box;
					border-radius: 5rpx;
					.recomIcon {
						width: 59rpx;
						height: 59rpx;
						background: url('../static/img/recommend.png') no-repeat center center / 100% 100%;
						position: absolute;
						left: 0;
						top: 0;
					}
					.t1 {
						color: #333333;
						font-size: 30rpx;
					}
					.t2 {
						margin-top: 36rpx;
						color: #c73e32;
						font-size: 28rpx;
					}
					.t3 {
						margin-top: 40rpx;
						padding: 20rpx 0;
						color: #999999;
						font-size: 26rpx;
					}
					.icon {
						position: absolute;
						right: 0rpx;
						bottom: 0rpx;
						width: 40rpx;
						height: 40rpx;
						display: none;
						background: url('../static/img/serviceAc.png') no-repeat center center / 40rpx 40rpx;
					}
					&.ac {
						border: 1rpx solid #fd6260;
						background: #fef5f5;
						.t3 {
							color: #fff;
							background: #fd6260;
						}
						.icon {
							display: block;
						}
					}
				}
			}
		}
		.payBox {
			margin: 0 36rpx 30rpx;
			padding: 0 36rpx;
			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(67, 12, 159, 0.13);
			::v-deep.uni-checkbox-input-checked {
				background: #007aff;
				transform: scale(0.8);
			}
			.payLine {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 36rpx 0;

				&.border {
					border-bottom: 1rpx solid #ededed;
				}

				.label {
					color: #333;
					font-size: 28rpx;

					&.wxIcon {
						padding-left: 40rpx;
						background: url('../static/img/wxPayIcon.png') no-repeat left center / 31rpx 27rpx;
					}

					&.aliIcon {
						padding-left: 40rpx;
						background: url('../static/img/aliPayIcon.png') no-repeat left center / 26rpx 26rpx;
					}
				}

				.text {
					color: #333;
					font-size: 28rpx;
					display: flex;
					align-items: center;

					.color {
						color: #999;
					}
				}
			}
		}

		.btns {
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 36rpx;
			border-top: 1rpx solid #ededed;
			background: #fff;
			.price {
				font-size: 28rpx;
				color: #333;

				.color {
					color: #ff4030;
				}
			}

			.btn {
				color: #ffffff;
				font-size: 28rpx;
				background: #fd6260;
				border-radius: 10rpx;
				padding: 10rpx 30rpx;
			}
		}
	}
	::v-deep.addTagIpt .uni-input-placeholder {
		padding-left: 20rpx;
		box-sizing: border-box;
	}
	::v-deep.addTagIpt .uni-input-input {
		padding-left: 20rpx;
		box-sizing: border-box;
	}
}
</style>
